/**
 * 自定义按钮组件
 */

import React from 'react';
import { Button as AntButton, ButtonProps as AntButtonProps } from 'antd';
import styled from 'styled-components';
import { themeConfig } from '../../theme/themeConfig';

interface ButtonProps extends Omit<AntButtonProps, 'variant' | 'size'> {
  variant?: 'primary' | 'secondary' | 'outline';
  size?: 'small' | 'medium' | 'large';
}

const StyledButton = styled(AntButton)<ButtonProps>`
  height: ${props => {
    switch (props.size) {
      case 'small': return '32px';
      case 'large': return '48px';
      default: return '40px';
    }
  }};
  
  border-radius: ${themeConfig.borderRadius.small};
  font-weight: ${themeConfig.typography.fontWeight.medium};
  transition: all ${themeConfig.transitions.duration} ${themeConfig.transitions.easing};
  
  ${props => {
    switch (props.variant) {
      case 'secondary':
        return `
          background-color: transparent;
          border-color: ${themeConfig.colors.primary};
          color: ${themeConfig.colors.primary};
          
          &:hover {
            background-color: ${themeConfig.colors.primary};
            color: white;
            border-color: ${themeConfig.colors.primary};
          }
        `;
      case 'outline':
        return `
          background-color: transparent;
          border-color: ${themeConfig.colors.border};
          color: ${themeConfig.colors.text};
          
          &:hover {
            border-color: ${themeConfig.colors.primary};
            color: ${themeConfig.colors.primary};
          }
        `;
      default:
        return `
          background-color: ${themeConfig.colors.primary};
          border-color: ${themeConfig.colors.primary};
          color: white;
          
          &:hover {
            background-color: ${themeConfig.colors.primaryHover};
            border-color: ${themeConfig.colors.primaryHover};
          }
          
          &:active {
            background-color: ${themeConfig.colors.primaryActive};
            border-color: ${themeConfig.colors.primaryActive};
          }
        `;
    }
  }}
  
  &:focus {
    box-shadow: 0 0 0 2px ${themeConfig.colors.primary}20;
  }
  
  &.ant-btn-loading {
    opacity: 0.8;
  }
`;

export const Button: React.FC<ButtonProps> = ({ 
  variant = 'primary', 
  size = 'medium',
  children,
  ...props 
}) => {
  return (
    <StyledButton
      variant={variant}
      size={size}
      {...props}
    >
      {children}
    </StyledButton>
  );
};
